<script lang="ts" setup>
import { ref } from "vue";
import myAxios from "../myAxios";
import { showFailToast, showSuccessToast } from "vant";
import router from "@/router";

const initFormData = {
  name: "",
  description: "",
  expireTime: null,
  maxNum: 1,
  status: 0,
  password: "",
};
const addTeamData = ref({ ...initFormData });
const showPicker = ref(false);
const onConfirm = ({ selectedValues }) => {
  addTeamData.value.expireTime = selectedValues.join("-");
  showPicker.value = false;
};
const onSubmit = async () => {
  //前端参数校验
  const PostData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status),
  };

  const res = await myAxios.post("/team/add/TeamForApp", PostData);
  console.log("添加队伍", res);
  if (res.data.code === 0) {
    showSuccessToast("添加成功");
    router.push({
      path: "/team",
      replace: true,
      //不希望回退
    });
  } else {
    showFailToast({
      message: res.data.message,
      forbidClick: true,
      position: "middle",
    });
  }
};
</script>

<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="addTeamData.name"
        :rules="[{ required: true, message: '请填写队伍名' }]"
        label="队伍名"
        name="队伍名"
        placeholder="队伍名"
      />
      <van-field
        v-model="addTeamData.description"
        :rules="[{ required: true, message: '请填写描述' }]"
        aria-placeholder="描述"
        autosize
        label="描述"
        placeholder="描述"
        rows="4"
        type="textarea"
      />
      <van-field
        v-model="addTeamData.expireTime"
        is-link
        label="时间选择"
        name="datePicker"
        placeholder="点击选择过期时间"
        readonly
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
      <van-field label="最大人数" name="slider">
        <template #input>
          <span style="width: 40px">{{ addTeamData.maxNum }}人</span>
          <van-slider v-model="addTeamData.maxNum" max="20" min="1" />
        </template>
      </van-field>
      <van-field label="队伍状态" name="radio">
        <template #input>
          <van-radio-group v-model="addTeamData.status" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">私有</van-radio>
            <van-radio name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-if="Number(addTeamData.status) === 2"
        v-model="addTeamData.password"
        :rules="[{ required: true, message: '请填写密码' }]"
        label="密码"
        name="密码"
        placeholder="密码"
        type="password"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button block native-type="submit" round type="primary">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<style scoped></style>
